<template>
    <div>
        <div v-if="cartlist.length<=0">you have no goods</div>
        <table>
            <caption><h1>cart car</h1></caption>
            <tr>
                <th></th>
                <th>id</th>
                <th>name</th>
                <th>price</th>
                <th>buys-count</th>
                <th>operation</th>
            </tr>
            <tr v-for="(item,i) in cartlist" :key="item.id">
                <td><input type="checkbox" v-model="item.checked"></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td><small>$</small>{{item.price.toFixed(2)}}</td>
                <td>
                    <button @click="item.count--" :disabled="item.count<=1">-</button>
                    {{item.count}}
                    <button @click="item.count++">+</button>
                </td>
                <td><a href="#" @click.prevent="del(i)">delete</a></td>
            </tr>
            <tr>
                <td colspan="3" align="right">total</td>
                <td colspan="3"><small>$</small>{{totalPrice.toFixed(2)}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                cartlist: [
                    {id: 1, name: '<<A>>', price: 10, count: 1, checked: true},
                    {id: 2, name: '<<B>>', price: 10, count: 1, checked: true},
                    {id: 3, name: '<<C>>', price: 10, count: 1, checked: true},
                    {id: 4, name: '<<D>>', price: 10, count: 1, checked: true},
                    {id: 5, name: '<<E>>', price: 10, count: 1, checked: true},
                ]
            }
        },
        computed: {
            totalPrice: {
                get() {
                    let sum = 0;
                    for (let item of this.cartlist) {
                        if (item.checked)
                            sum += item.price * item.count;
                    }
                    return sum;
                }
            }
        },
        methods: {
            del(i) {
                this.cartlist.splice(i, 1);
            }
        }
    }
</script>

<style scoped>
    table {
        width: 600px;
        border: 1px solid #888888;
        border-collapse: collapse;
    }

    td, th {
        border: 1px solid #888888;
        padding: 10px;
    }

    th {
        background: #ccc;
    }

</style>